<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>

<th:block th:fragment="header">
    <section class="section section--header mb-5">
        <div class="media">
            <div class="d-none d-md-block header-image">
                <!--img th:src="@{${request.icon}(size=200)}" th:alt-title="${request.owner}" /-->
                <div class="fnd-profile__picture"
                     th:style="'background-image: url(' + ${profile.getPicture() == null ? '/assets/img/profile-avatar.png' : profile.getPicture()} + ');'"></div>
            </div>
            <div class="media-body text-center text-md-left">
                <div class="mb-2 d-block d-md-none">
                    <div class="header-image d-inline-flex">
                        <div class="fnd-profile__picture"
                             th:style="'background-image: url(' + ${profile.getPicture() == null ? '/assets/img/profile-avatar.png' : profile.getPicture()} + ');'"></div>
                    </div>
                </div>
                <h1 class="mb-0">
                    <div th:text="${profile.getName()}">Name</div>
                </h1>
                <div>
                    <div class="mb-2" th:text="${profile.getHeadline()}">Developer</div>
                    <div class="fnd-profile__fields">
                        <dl class="mb-1">
                            <dt><label class="mb-0">E-mail</label></dt>
                            <dd th:text="${profile.getEmail()}">my@email.com</dd>
                        </dl>
                        <div class="mb-1">
                            <dt><label class="mb-0">Wallets</label> <small><a th:if="${profile.arkane != null}" href="/profile/managewallets">Manage</a></small></dt>
                            <dd th:each="w : ${profile.getWallets()}"><a target="_blank" th:href="${arkaneWalletEndpoint + w.id}" th:text="${w.description}"></a> <small th:text="${'(' + w.address+ ')'}"></small></dd>
                        </div>
                        <div class="mb-1" th:if="${profile.arkane != null && profile.getWallets().isEmpty()}">
                            no wallets found
                        </div>
                        <div class="mb-1" th:if="${profile.arkane == null}">
                            To gain access to your wallets, please <a href="/profile/link/arkane">link your account to Arkane</a>
                        </div>
                    </div>
                </div>
                <a th:if="${false}" th:href="@{/profile/mastery}"
                   class="col-12 col-md-3 d-flex align-items-center justify-content-center">
                    <h2 class="text-success">Novice</h2>
                </a>

            </div>
        </div>
    </section>


    <div class="row">
        <div class="col-12 mb-5">
            <nav class="navbar navbar-expand navbar--filter mb-2">
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li th:classappend="${activeTab == 'profile'} ? 'active' : ''" class="nav-item">
                            <a class="nav-link" th:href="@{/profile}">Profile</a>
                        </li>
                        <li th:classappend="${activeTab == 'rewards'} ? 'active' : ''" class="nav-item">
                            <a class="nav-link" th:href="@{/profile/rewards}">Rewards</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="navbar--filter__description">
                <span th:if="${activeTab == 'profile'}">Your current connections</span>
                <span th:if="${activeTab == 'rewards'}">An overview of the rewards your've earned so far.</span>
            </div>
        </div>
    </div>
</th:block>

</body>
</html>